<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <link rel="icon" href="__ROOT__/public/lcbook.ico" type="image/x-icon">
    <link rel="stylesheet" href="__ROOT__/public/static/css/common.css">
    <link rel="stylesheet" href="__ROOT__/public/static/css/header.css">
    <link rel="stylesheet" href="__ROOT__/public/static/css/popBox.css">
    <link rel="stylesheet" href="__ROOT__/public/static/css/adv.css">
    <link rel="stylesheet" href="__ROOT__/public/static/css/shopDetail.css">
    <link rel="stylesheet" href="__ROOT__/public/static/css/shopCommit.css">
    <!-- fontawesome字体 -->
    <link rel="stylesheet" href="__ROOT__/public/static/font/font-awesome.min.css">
</head>

<body>
    <!-- 头部 -->
    {include file="./public/common/header.html"/}

    <!-- 广告导航 -->
    <div id="adv">
        <div class="advBox">
            <div class="logo">
                <a href="{:url('index/index')}">
                    <img src="__ROOT__/public/static/image/logo.png" alt="">
                </a>
            </div>
            <div class="advContent">
                书瞳是一个专注于卖优质书籍的网站，给用户最好的体验，是我们永恒的目标。
            </div>
        </div>
    </div>

    <!-- 商品详情区域 -->
    <div id="shopDetail">
        <!-- 图片及轮播 -->
        <div class="shopLeft">
            <!-- 大图 -->
            <div id="shopLeftBox">
                {if condition="!empty($book.pictureb)"}
                <img src="__ROOT__/public/static/image/{$book.pictureb}" alt="" class="bimage">
                {else /}
                <img src="__ROOT__/public/static/image/{$book.picturem}" alt="" class="bimage">
                {/if}
                <span id="lay"></span>
            </div>

            <!-- 大图片 -->
            <div id="shopLeftBigBox">
                {if condition="!empty($book.pictureb)"}
                <img src="__ROOT__/public/static/image/{$book.pictureb}" alt="" class="bimage">
                {else /}
                <img src="__ROOT__/public/static/image/{$book.picturem}" alt="" class="bimage">
                {/if}
            </div>

            <!-- <img src="__ROOT__/public/static/image/{$book.pictureb}" alt=""> -->

            <!-- 小图 -->
            <div class="mt12">
                {if condition="!empty($book.pictureb)"}
                <img src="__ROOT__/public/static/image/{$book.pictureb}" alt="" class="simage ml12">
                {/if}
                {if condition="!empty($book.picturem)"}
                <img src="__ROOT__/public/static/image/{$book.picturem}" alt="" class="simage">
                {/if}
            </div>

        </div>

        <!-- 商品价格等 -->
        <div class="shopRight">
            <h3>{$book.bname}</h3>
            {assign name="discount" value="$book.yourprice/$book.price" /}
            {assign name="discount" value="$discount *10" /}
            <!-- 价格 -->
            <div class="priceArea">
                <div class="priceBox">
                    <div>
                        <span>现价</span>
                        <span class="yourprice">￥{$book.yourprice}</span>
                    </div>
                    <div>
                        <span>原价</span>
                        <span class="price">￥{$book.price}</span>
                        <span class="discount">{$discount|number_format=2}折</span>
                    </div>
                </div>

                <!-- 判断是否收藏 -->
                <a href="#" onclick="addStar()" id="nostar">
                    <span class="star">&#xf005 收藏</span></a>
                <a href="#" id="isstar" onclick="deleteStar()" style="display:none">
                    <span class="star" style="color:#F90303">&#xf005 已收藏</span></a>
            </div>


            <!-- 查找有效的评论数 -->
            {assign name="commentcount" value="0" /}
            {foreach $shoplists as $shoplist}
            {if condition="!empty($shoplist.pjcontent)"}
            {assign name="commentcount" value="$commentcount+1" /}
            {/if}
            {/foreach}
            <!-- 销量与评价 -->
            <div class="cArea">
                <div>
                    <span>月销量</span>
                    <span class="activate_font">{$book.SelledNum}</span>
                </div>
                <div>
                    <span>累计评价</span>
                    <span class="activate_font">{$commentcount}</span>
                </div>
            </div>

            <!-- 数量、库存 -->
            <div class="numArea">
                <span>数量</span>
                <div class="btnBox">
                    <button id="subShop">-</button>
                    <div>
                        <input type="text" value="1" id="shopNum">
                    </div>
                    <button id="addShop">+</button>
                </div>
                <span>库存{$book.storenum}件</span>
            </div>

            <!-- 按钮 -->
            <div class="btnArea">
                <button class="buyNow" onclick="buyNow('{$book.bookID}')">立即购买</button>
                <button class="toCart" onclick="toCart('{$book.bookID}')">&#xf217 加入购物车</button>
            </div>
        </div>
    </div>

    <!-- 商品介绍及评论 -->
    <div id="shopCommit">
        <div class="shopCommitTitle">
            <div class="activate" id="detailBtn">商品详情</div>
            <div id="commitBtn">评论 {$commentcount}</div>
        </div>

        <!-- 商品详情 -->
        <div class="shopCommitContent" id="shopCommitContent1">
            <div class="detailBox">
                <span>内容简介：</span>
                <span>{$book.shuoming}</span>
            </div>
        </div>

        <!-- 评论 -->
        <div class="shopCommitContent" id="shopCommitContent2" style="display: none;">
            {assign name="count" value="$shoplists|count"}
            {if condition="$count neq '0' "}
            <!-- 一条评论 -->
            {foreach $shoplists as $shoplist}
            <div class="commitBox">

                <div class="commitBoxLeft">
                    <span>{$shoplist.pjcontent}</span>
                    <span class="sf mt12">{$shoplist.pjtime}</span>
                </div>
                <div class="commitBoxLeft sf">
                    {$shoplist.email}
                </div>

            </div>
            {/foreach}
            {else /}

            <!-- 没有评论时显示 -->
            <div class="commitBox" style="display: block;">
                <div class="commitBoxLeft">
                    <span class="activate_font">恭喜你发现了新大陆！来发表第一条评论吧！</span>
                </div>
            </div>
            {/if}
        </div>
    </div>

    <!-- js代码 -->
    <script src="__ROOT__/public/static/js/jquery-1.8.3.min.js"></script>
    <script src="__ROOT__/public/static/js/header.js"></script>
    <script>
        //添加收藏
        function addStar() {
            $.get('{:url("star/addStar")}', {
                bookID: "{$book['bookID']}"
            }, function () {
                if (confirm("收藏成功， 跳转收藏页？")) {
                    window.location.href = '{:url("star/star")}';
                } else {
                    $("#isstar").show();
                    $("#nostar").hide();
                }
            });
        }

        //取消收藏
        function deleteStar() {
            $.get('{:url("star/deleteStar")}', {
                bookID: "{$book['bookID']}"
            }, function (res) {
                if (res == "ok") {
                    $("#isstar").hide();
                    $("#nostar").show();
                } else {
                    alert("系统繁忙");
                }
            });
        }

        //加入购物车
        function toCart(bookID) {
            let shopNum = parseInt($('#shopNum').val());
            $.get('{:url("cart/addCart")}', {
                bookID: bookID,
                num: shopNum
            }, function (res) {
                window.location.href = '{:url("cart/cart")}';
            });
        }

        //立即购买
        /*
            1、ajax将商品添加进购物车
            2、跳转到生成订单界面（将cartID传过去）
        */
        function buyNow() {
            //1、将商品添加进购物车
            let num = (parseInt)($("#shopNum").val());
            if (isNaN(num)) num = 1;
            // console.log(num);
            $.get("{:url('cart/addCart')}", {
                bookID: '{$book.bookID}',
                num: num
            }, function (res) {
                //查找cartID
                $.get("{:url('cart/findCartID')}", {
                    bookID: '{$book.bookID}'
                }, function (res) {
                    window.location.href = "__ROOT__/index/corder/corder?cartIDs=" + res;
                });
            });
        }

        $(function () {
            isstar();//判断当前商品是否收藏
            //减少商品数量
            $('#subShop').click(function () {
                if ($('#shopNum').val() == "1") {
                    return;
                }
                let num = parseInt($('#shopNum').val()) - 1;
                $('#shopNum').val(num);
            });

            //添加商品数量
            $('#addShop').click(function () {
                let num = parseInt($('#shopNum').val()) + 1;
                $('#shopNum').val(num);
            });


            //商品详情被点击
            $('#detailBtn').click(function () {
                $('#detailBtn').addClass('activate');
                $('#shopCommitContent1').show();
                $('#commitBtn').removeClass('activate');
                $('#shopCommitContent2').hide();
            });


            //评论被点击
            $('#commitBtn').click(function () {
                $('#detailBtn').removeClass('activate');
                $('#shopCommitContent1').hide();
                $('#commitBtn').addClass('activate');
                $('#shopCommitContent2').show();
            });


            // 鼠标移入小图、替换大图
            $('.simage').mouseover(function (ele) {
                let src = $(this).attr('src');
                $('.bimage').attr('src', src);
                // document.getElementById("bimage1").src = src;
            });

            // 实现放大镜效果
            var Box = document.getElementById("shopLeftBox");
            var bigBox = document.getElementById("shopLeftBigBox");
            var bigbox = getChildNodes(bigBox)[0];//获取大盒子里面的img
            var lay = document.getElementById("lay");//一个正方形

            //鼠标移入时，将放大镜和bigBox显示出来
            Box.onmouseover = function () {
                lay.style.display = "block";
                bigBox.style.display = "block";
            }
            //鼠标移出时，将放大镜和bigBox隐藏起来
            Box.onmouseout = function () {
                lay.style.display = "none";
                bigBox.style.display = "none";
            }

            // 当鼠标在盒子里移动时
            Box.onmousemove = function (e) {
                e = e || event;//事件源的兼容问题
                var scale = 2;//图片的放缩比例
                //将鼠标放到放大镜的中间
                var x = e.clientX - lay.offsetWidth / 2;
                var y = e.clientY - lay.offsetHeight / 2;
                //将放大镜的宽高与盒子的宽高结合起来按比例放缩
                lay.style.width = parseInt(Box.offsetWidth / scale) + "px";
                lay.style.height = parseInt(Box.offsetHeight / scale) + "px";
                //设置大图片的宽高
                bigbox.style.width = Box.offsetWidth * scale + "px";
                bigbox.style.height = Box.offsetHeight * scale + "px";

                let X = $(Box).offset().left;
                let Y = $(Box).offset().top - $(document).scrollTop();
                let lb = X;  //左
                let rb = X + Box.offsetWidth - lay.offsetWidth;//右
                let ub = Y;//上
                let db = Y + Box.offsetWidth - lay.offsetWidth;//下

                x = x < lb ? lb : x;
                x = x >= rb ? rb : x;
                y = y < ub ? ub : y;
                y = y >= db ? db : y;

                lay.style.left = x - X + "px";//相对于父亲的偏移量
                lay.style.top = y - Y + "px";

                var left = lay.offsetLeft * scale;//相对父亲的偏移量
                var top = lay.offsetTop * scale;
                bigbox.style.marginLeft = (left * (-1)) + "px";
                bigbox.style.marginTop = (top * (-1)) + "px";


            }

            /* $('body').mousemove(function(e){
                e = e || event;//事件源的兼容问题
                var scale = 4;//图片的放缩比例
                //将鼠标放到放大镜的中间
                var x = e.clientX - lay.offsetWidth / 2;
                var y = e.clientY - lay.offsetHeight / 2;
                // console.log(e.clientX, e.clientY);
            }); */
        });

        //获取孩子元素的节点
        function getChildNodes(element) {
            var arr = [];
            var eList = element.childNodes;
            for (var i = 0; i < eList.length; i++) {
                if (eList[i].nodeType == 1) { //过滤空白节点
                    arr.push(eList[i]);
                }
            }
            return arr;
        }

        //判断是否收藏
        function isstar(e) {
            var bookID = "{$book['bookID']}";
            $.post("{:url('star/isStar')}", { "bookID": bookID }, function (result) {
                if (result == 'success') {
                    $("#isstar").show();
                    $("#nostar").hide();
                }
                else {
                    // 添加收藏并跳转页面
                    // window.location.href = "{:url('star/addStar')}?bookID={$book.bookID}";
                    $("#isstar").hide();
                    $("#nostar").show();
                }
            });
        }

    </script>
</body>

</html>